import cn from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
import Tooltip from '@kuiper-components/tooltip';

import { WARNING_CATEGORY_KEY_LABEL_MAP } from '../../../common/constants';
import s from './style.module.css';
import { number } from '../../../common/formatter';

function WarningCategoryCount({ className, taskType, category }) {
	return (
		<Tooltip
			placement="top"
			overlay={
				<table className={s.countsTip}>
					<thead>
						<tr>
							{Object.values(WARNING_CATEGORY_KEY_LABEL_MAP[taskType]).map(
								label => (
									<th key={label}>{label}</th>
								)
							)}
						</tr>
					</thead>
					<tbody>
						<tr>
							{Object.keys(WARNING_CATEGORY_KEY_LABEL_MAP[taskType]).map(
								key => (
									<td key={key} className={cn(s[key], s.count)}>
										{category?.[key]?.warningCount || 0}
										{category?.[key]?.warningIgnoredCount > 0 && (
											<span className={s.text}>
												（已忽略{category[key].warningIgnoredCount}）
											</span>
										)}
									</td>
								)
							)}
						</tr>
					</tbody>
				</table>
			}
		>
			<table className={cn(className, s.counts)}>
				<tbody>
					<tr>
						{Object.keys(WARNING_CATEGORY_KEY_LABEL_MAP[taskType]).map(key => (
							<td key={key} className={cn(s[key], s.count)}>
								<span className={s.spaNum}>
									{number(category?.[key]?.warningCount || 0)}
								</span>
							</td>
						))}
					</tr>
				</tbody>
			</table>
		</Tooltip>
	);
}

WarningCategoryCount.propTypes = {
	className: PropTypes.string,
	category: PropTypes.shape({}),
	taskType: PropTypes.string.isRequired,
};
WarningCategoryCount.defaultProps = {
	className: '',
	category: {},
};

export default WarningCategoryCount;
